<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
        <link rel="stylesheet" type="text/css" href="sidebar.css">
        <script src="../jquery.js"></script>
        <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    </head>
    <body>
        <!--导航栏-->
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">资源共享站</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                    <li><a href="#">动态</a></li>
                    <li><a href="#">分享</a></li>
                    <li><a href="#">更多</a></li>
                </ul>
            </div>
            <div style="float: right;"class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-user"></span> 罗蔚略 <span class="caret"></span>
                      </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">···</a></li>
                        <li><a href="#">···</a></li>
                    </ul>
                </li>
            </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <!--侧导航栏-->
              <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-pills nav-stacked first-ul">
                     <li><a href="index.html"><span class="glyphicon glyphicon-file"></span> 全部文件</a></li>
                     <li><a href="photo.html">&nbsp;&nbsp;&nbsp;&nbsp;图片</a></li>
                     <li><a href="table.html">&nbsp;&nbsp;&nbsp;&nbsp;文档</a></li>
                     <li><a href="vido.html">&nbsp;&nbsp;&nbsp;&nbsp;视频</a></li>
                     <li><a href="music.html">&nbsp;&nbsp;&nbsp;&nbsp;音乐</a></li>
                     <li><a href="another.html">&nbsp;&nbsp;&nbsp;&nbsp;其他</a></li>
                     <li><a href="myShare.html"><span class="glyphicon glyphicon-share-alt"></span> 我的分享</a></li>
                     <li class="active"><a href="recycle.html"><span class="glyphicon glyphicon-trash"></span> 回收站</a></li>
                </ul>
                <div class="progress my-progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                      <span class="sr-only">20% Complete</span>
                    </div>
                  </div>
                  <span class="text">100G/1000G</span>
                </div>
              </div>
                <!--主体部分-->
             <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                 <!--文字和按钮-->
                <div class="row">
                 <div class="text col-sm-6 col-md-6">
                    <div><span class="title-left" style="color: #666;">提示：回收站不占用网盘空间，文件保存10天后将被自动清除。</span></div>
                 </div>
                 <div class="col-sm-4 col-md-4"> </div>
                 <div class="col-sm-1 col-md-1"> <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span> 清空回收站</button></div>
                </div> 
                <!-- 列表 -->
                <div class="row table tab">
                    <table class="table table-hover " style="font-size: small;">
                        <caption> 回收站</caption>
                        <thead>
                            <tr>
                            <th>
                                <label>
                                    <input type="checkbox"> 
                                </label> 文件名</th>
                            <th>大小</th>
                            <th>删除时间</th>
                            <th>有效时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可1.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可2.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr > 
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可4.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                            <tr>
                                <td> <label>
                                    <input type="checkbox"> 
                                </label> 洛可可3.mp4</td>
                                <td>100m</td>
                                <td>2020-5-4 18:30</td>
                                <td>5天</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
             </div>
            </div>
        </div>
    </body>
    </html>
</html>